<div class='title'>输入框</div>
<div class='text indent'>
    使用j-input类来定义一个输入框，JUI 六种类型的输入框，开发者可以使用input或者textarea标签来作为一个输入框。请看详细的例子：</div>
<div class="sub">
    <div class='text'>1.不同种类的输入框：</div>
    <div class='j-code' disabled width='99%' height='auto'>
<!--使用宽度-->
<input class="j-input" value='默认' width='220' type="text">
<input class="j-input normal" value='normal' type="text">
<input class="j-input success" value='成功' type="text">
<input class="j-input warn" value='warn' type="text">
<input class="j-input info" value='info' type="text">
<input class="j-input danger" value='危险' type="text">
<!--使用disabled-->
<input class="j-input" disabled value='禁用' type="text">
    </div>
    <div class="out">
        <input class="j-input" value='默认' width='220' type="text">
        <input class="j-input normal" value='normal' type="text">
        <input class="j-input success" value='成功' type="text">
        <input class="j-input warn" value='warn' type="text">
        <input class="j-input info" value='info' type="text">
        <input class="j-input danger" value='危险' type="text">
        <input class="j-input" disabled value='禁用' type="text">
    </div>

    <div class='text'>2.不同大小的输入框：</div>
    <div class='j-code' disabled width='99%' height='auto'>
<input class="j-input xs" value='超小' type="text">
<input class="j-input s" value='small' type="text">
<input class="j-input m" value='中等（默认）' type="text">
<input class="j-input l" value='large' type="text">
<input class="j-input xl" value='超大' type="text">
    </div>
    <div class="out">
        <input class="j-input xs" value='超小' type="text">
        <input class="j-input s" value='small' type="text">
        <input class="j-input m" value='中等（默认）' type="text">
        <input class="j-input l" value='large' type="text">
        <input class="j-input xl" value='超大' type="text">
    </div>
    <div class='text'>3.textarea：</div>
    <div class='j-code' disabled width='99%' height='auto'>
<textarea class="j-input">teatarea</textarea> 
    </div>
    <div class="out">
        <textarea class="j-input">teatarea</textarea> 
    </div>
    <div class='text'>3.带有icon 和 title的输入框：</div>    
    <div class='j-code' disabled width='99%' height='auto'>
<input class="j-input xs" icon='pencil' value='使用icon' type="text">
<input class="j-input normal s" title='用户' value='使用title' type="text">
<input class="j-input info j-icon-right m" icon='user' value='放到右侧' type="text">
<input class="j-input success l" icon='user' title='用户' value='结合使用' type="text">
<input class="j-input warn xl" icon='pencil' jattr="title:用户" value='使用jattr绑定属性' type="text">
<input class="j-input danger" jattr="title:删除;icon:trash" value='使用jattr绑定多个属性,结合width使用' width='400' type="text">
    </div>
    <div class="out">
        <input class="j-input xs" icon='pencil' value='使用icon' type="text">
        <input class="j-input normal s" title='用户' value='使用title' type="text">
        <input class="j-input info j-icon-right m" icon='user' value='放到右侧' type="text">
        <input class="j-input success l" icon='user' title='用户' value='结合使用' type="text">
        <input class="j-input warn xl" icon='pencil' jattr="title:用户" value='使用jattr绑定属性' type="text">
        <input class="j-input danger" jattr="title:删除;icon:trash" value='使用jattr绑定多个属性,结合width使用' width='400' type="text">
    </div>
</div>
<script>
    new Jet({
    })
</script>